<template>
  <div class="feed_wrapper" v-if="feedTop != null">
    <notice-bar v-if="feedTop.hasPermission" :showText="noticeMsg" :showNotice="showNotice" @handleClickNotice="handleClickNotice" @handleClickCloseNotice="handleClickCloseNotice"></notice-bar>
    <div class="banner"><img :src="$addXossFilter(feedTop.avatar)" class="c-w100 c-h" /></div>
    <div class="c-bg-white c-ph20 c-pt20 c-pb10">
      <p class="c-fs30 c-fw600 c-text-ellipsis2 c-fc-xblack c-wb-ba">{{feedTop.name}}</p>
      <div class="c-fs20 c-fc-gray c-flex-row c-justify-sb c-aligni-center c-mt10">
        <div @click="getCircleData()">
          <span>{{feedTop.feedCount | formatTenThousand}}条动态</span> |
          <span>{{feedTop.memberCount | formatTenThousand}}人加入</span>
          <span class="iconfont c-fs20 c-fc-gray" v-if="feedTop.hasPermission">&#xe635;</span>
        </div>
      </div>
      <!-- vip价格显示 -->
      <div class="c-mt16">
        <price-bar class="c-ph0 priceBar" v-if="!feedTop.hasPermission && feedTop.payType != 4"
          :dataInfo="feedTop"
        >
        </price-bar>
      </div>
    </div>
    <div v-if="showDiscount || feedTop.payType == 2" class="c-bg-white c-pv10 mod-discount">
      <!-- 优惠 -->
      <discount-tip class=""
        :isNew="true"
        :vipDiscountType="false"
        :ckFromText="'免费进入圈子交流'"
        :originPrice="Number(dynicMaxProdPrice)"
        :couponList="couponList"
        @clickShowCoupon="showCoupon = true"
        :isiOS='isiOS'
        :dataInfo="feedTop"
        :hasPermission='feedTop.hasPermission'
        :showDiscount="showDiscount"
        :isShowStyle="false"
        :circleStyle="true">
      </discount-tip>
      <div v-if="feedTop.payType == 2" @click.stop="openSpec" class="c-flex-row c-justify-sb c-aligni-center c-pl24 c-pr24 c-pb12">
        <div class="c-fs22 c-flex-row">
          <span class="c-fc-gray c-mr28">规格</span>
          <div v-if="currSpec">{{currSpec.tit}}</div>
          <div v-else class="c-fc-xblack">请选择</div>
        </div>
        <span class="iconfont c-fc-gray c-fs40">&#xe7be;</span>
      </div>
    </div>

    <div class="c-bg-white c-ph24 c-bd-t12-f5 c-bd-b1-f6">
      <my-small-tabbar id="tabhBar" :styleType="2" :class="tabhBarFixed == true ? ($isWxApp() ? 'tabhBar c-wx-top0' : 'tabhBar'):''" :fontSet="{defaultColor:'c-fc-sblack', activeColor:'theme-fc c-fw500'}"
        :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType" class="c-bg-white"></my-small-tabbar>
    </div>
    <!-- 圈子简介等内容 -->
    <div v-if="typeBar == 1">
      <div class="c-bg-white c-pt30 c-pb80">
        <!-- 圈主简介 -->
        <div v-if="feedTop.leader" class="c-mh24 c-p c-mb40 leader">
          <div class="c-flex-row c-pa c-p-t0 c-p-r0 c-p-l0 c-ph24">
            <div class="c-ww124 c-hh124 c-br20 c-text-hidden c-mr26">
              <img class="c-w100 c-h" :src="$addXossFilter(feedTop.leader.avatar, require('@/assets/defult_head.png'))" />
            </div>
            <div class="c-mt60 c-flex-1 c-flex-row c-aligni-center">
              <div class="c-fc-xblack c-fs30 c-fw600 c-text-hidden c-maxw242 c-text-ellipsis1 c-mr8">{{ feedTop.leader.name }}</div><span class="roles-tag c-fs20 theme-bg c-fc-white">圈主</span>
            </div>
          </div>
          <div class="c-fc-xblack c-fs26 c-lh50 c-ph24 c-pb24 intro">{{feedTop.leader.intro}}</div>
        </div>
        <!-- 简介 -->
        <div class="c-w100 c-pb30 c-ph24">
          <p class="c-fs26 c-fc-xblack c-mb20 c-p c-pl12 c-fw600">圈子介绍</p>
          <p class="c-text-ellipsis2 c-fs22 c-fc-gray c-pl12 c-pr12">{{feedTop.intro}}</p>
        </div>

        <!-- 答主 -->
        <template v-if="answerList.length > 0 && companyAuth.enableQuestionModule == 1">
          <div class="c-ph24">
            <div class="c-bd-t1"></div>
          </div>
          <div class="c-bg-white c-pt30">
            <div class="c-flex-row c-justify-sb c-ph24">
              <div class="c-fs26 c-fc-xblack c-p c-pl12 c-fw600">答主</div>
            </div>
            <div class="c-w100 c-ph24 c-pt20 c-pb30 c-contexty-hidden c-contextX-scroll c-flex-row c-ws-n">
              <div class="c-ww184 c-br20 boxThemeItem" v-for="(item, index) in answerList" :class="index == answerList.length - 1?'':'c-mr20'" :key="index">
                <div class="c-flex-column c-aligni-center c-ww184 c-hh206 c-ph22 c-pv20">
                  <img class="c-ww80 c-hh80 c-brp50" :src="$addXossFilter(item.avatar, require('@/assets/defult_head.png'))" alt="">
                  <span class="c-fs24 c-fc-xblack c-mt12 c-text-ellipsis1 c-w100 c-textAlign-c">{{item.name}}</span>
                  <p class="c-fs20 c-fc-gray c-mt12 c-text-ellipsis1 c-w100 c-textAlign-c">{{item.honor}}</p>
                </div>
              </div>
            </div>
          </div>
        </template>
        <!-- 答主end -->
      </div>
    </div>
    <!-- 动态 -->
    <div v-if="typeBar == 2" class="c-pb130">
      <circle-common-list :isShowTopBar="false" :feedList="feedList" :feedTop="feedTop" selectList="" :playAduioSrc="playAduioSrc" :progress="progress" @clickPreviewImage="clickPreviewImage"
        @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo" @handleClickThemeRoute="handleClickThemeRoute" @clickGoLiveDetail="clickGoLiveDetail"></circle-common-list>
      <!-- list列表 -->
      <loading-status-tem v-if="(feedTop.hasPermission || feedTop.role == 2)" :dataStatus="dataStatus" noDataText="暂无数据" class="c-bg-white"></loading-status-tem>
      <div class="c-bg-white c-pb80" v-else>
        <template v-if="feedList.length > 0">
          <div class="c-fc-sgray c-fs20 c-textAlign-c c-flex-row c-flex-center c-hh100">加入圈子可查看更多内容哦~~</div>
        </template>
        <loading-status-tem :noData="feedList.length == 0" noDataText="暂无动态"></loading-status-tem>
      </div>
    </div>
    <!-- 主题 -->
    <div v-if="typeBar == 3">
      <div class="c-w100 c-bg-white">
        <div class="c-flex-column c-pv24 c-ph24 c-bd-b1" @click.stop="joinThemeCircle(item)" v-for="(item, index) in circleThemeList" :key="index">
          <div class="c-fs24 c-fc-xblack c-text-ellipsis2">
            <span class="theme-bg-10 theme-fc c-hh28 c-pv4 c-ph8 c-br4 c-fs20 c-mh8 c-mr8" v-if="item.isHaveTask">
              <i class="iconfont c-fs16 c-vcAlign-middle">{{item.taskState == 2 ? `&#xe68a;` : `&#xe644;`}}</i>
              <span class="c-ml4">任务</span>
            </span>
            <i class="iconfont theme-fc">&#xe6fd;</i>
            {{item.themeName}}
          </div>
          <div class="c-mt12 c-flex-row c-justify-sb c-fs20 c-fc-gray c-aligni-center">
            <div>
              <span>{{item.joinMemberCount | formatTenThousand}}人加入</span> |
              <span>{{item.feedCount | formatTenThousand}}条动态</span>
            </div>
            <div class="c-fs20 theme-fc" v-if="item.joinType == 1">免费</div>
            <div class="c-fs20 theme-fc" v-if="item.joinType == 2 && !$isWxAppIos()">
              <span class="c-lh">{{'￥' | iosPriceFilter}}{{item.price}}</span>
            </div>
          </div>
        </div>
        <loading-status-tem :dataStatus="themeDataStatus" noDataText="暂无相关主题" class="c-bg-white" :class="!feedTop.hasPermission ? 'c-pb80':''"></loading-status-tem>
      </div>
    </div>

    <!-- 底部栏 -->
    <bottom-buy-com :ckFromTitle="'圈子'" :isNeedPay="!feedTop.hasPermission && (feedTop.payType == 2 || feedTop.payType == 4)" @spreadInvite="inviteFriends">
      <div v-if="isFromRenew" @click.stop="clickBuy" class="c-flex-column c-justify-center c-aligni-center c-fc-white c-hh64 c-w100 c-br32  theme-bg">
        <span class="c-fs28 c-lh">立即续费</span>
      </div>
      <div v-else-if="feedTop.hasPermission" class="c-flex-column c-justify-center c-aligni-center c-fc-white c-hh64 c-w100 c-br32  theme-bg" @click.stop="jumpToCircleMaster()">
        <span class="c-fs28 c-lh">进入圈子</span>
      </div>
      <!-- payType1:免费2：付费 -->
      <template v-else>
        <!-- 无权限 -->
        <div v-if="feedTop.payType == 1" class="c-flex-column c-justify-center c-aligni-center c-fc-white c-hh64 c-w100 c-br32  theme-bg" @click.stop="joinCircle()">
          <span class="c-fs28 c-lh">免费加入</span>
        </div>
        <template v-if="feedTop.payType == 2">
          <template v-if="!$isWxAppIos()">
            <div @click="clickBuy" class="c-flex-row c-justify-center c-aligni-center c-fc-white c-hh64 c-w100 c-br32  c-fs28 theme-bg">立即购买</div>
            <!-- <div @click.stop="openSpec" class="c-flex-row c-justify-center c-aligni-center c-fc-white c-hh64 c-w100 c-br32  c-fs28 theme-bg-gradient">{{'￥' | iosPriceFilter}}{{Number(dynicMinProdPrice).toFixed(2)}}加入</div> -->
          </template>
          <div v-else class="c-flex-row c-justify-center c-aligni-center c-fc-white c-hh64 c-w100 c-br32  c-fs28 theme-bg">咨询客服</div>
        </template>
        <div @click.stop="backPackage()" v-if="feedTop.payType == 4" class="c-flex-column c-justify-center c-aligni-center c-fc-white c-hh64 c-w100 c-br32 theme-bg">
          <span class="c-fs28 c-lh">加入圈子</span>
        </div>
        <div @click.stop="clickEnterPwd()" class="c-flex-column c-justify-center c-aligni-center c-fc-white c-hh64 c-w100 c-br32 theme-bg" v-if="feedTop.payType == 3">
          <span class="c-fs28 c-lh">输入密码进入</span>
        </div>
      </template>
    </bottom-buy-com>
    <!-- 输入密码 -->
    <comfirm-com :showPassword="showPassword" :noticeText="noticeText" :text="'输入密码进入圈子'" :placeholderText="'请输入密码'" @changePsw="changePsw" @closePassword="showPassword = false"
      @submitPassword="submitPassword"></comfirm-com>
    <!-- 优惠卷列表 -->
    <coupon-list-com @closeModal="closeModal" @getCouponList="getCouponList" :couponIsPage="couponIsPage" :couponLoading="couponLoading" :couponList="couponList" :showCoupon="showCoupon"
      :dataInfo="feedTop"
      :vipDiscount="feedTop.vipDiscount" :svipDiscount="feedTop.svipDiscount"
      :originPrice="feedTop.payType == 2 ? Number(dynicMaxProdPrice) : 0"
      :prodId="Number(id)"
      :prodType="181">
    </coupon-list-com>
    <!-- 配套课程 -->
    <circle-supporting @handleClickGodetail="handleClickGodetail" :showSupporting="showSupporting" :supportingList="supportingList"
      @handleClickCloseSupport="handleClickCloseSupport"></circle-supporting>
    <!-- 海报 -->
    <circle-poster ref="circlePoster" :qrcodeImg="qrcodeImg"></circle-poster>
    <!-- 音频 -->
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <!-- 视频 -->
    <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc"></video-popup>
    <!--  -->
    <cj-popup v-model="showStudyModal" position="bottom" round v-if="packageList.length > 0">
      <section class="c-ph24 c-pb10 c-bg-white">
        <div class="c-hh90 c-bd-b1 c-flex-row c-aligni-center">
          <span class="c-fs28 c-fc-xblack c-flex-grow1 c-w0">购买以下任意产品，即可免费加入圈子</span>
          <i @click="showStudyModal = false" class="iconfont c-fs14 c-ph10 c-pv10 c-fc-sgray c-bg-f6 c-brp50">&#xe61b;</i>
        </div>
        <package-index-com v-if="packageList.length > 0 && companyAuth.enableCircleModule == 1" :showAll="true" :proType="14" :proId="id" :isHomePage="false" :packageList="packageList"
          @goFirst="goFirst(packageList[0])"></package-index-com>
      </section>
    </cj-popup>
    <cj-popup v-model="showPackageTip" v-if="supportingList.length > 0" round>
      <div class="c-ww520 c-bg-white c-pb40 c-textAlign-c">
        <p class="c-fs28 c-pt40 c-fw600 c-fc-xblack">
          <span>需购买配套课程后</span>
        </p>
        <p class="c-fs22 c-pt20 c-pb40">方可免费加入圈子</p>
        <div @click="clickShowStudyModal" class="c-ww220 c-mlr-auto c-hh60 c-flex-row c-flex-center c-br30 c-fs26 c-fc-white theme-bg">我知道了</div>
      </div>
    </cj-popup>
    <!-- 续费规则 -->
    <spec
      :prodPrice="feedTop.price"
      ref="circleSpec"
      @chooseSpec="chooseSpec"
    >
    </spec>
    <promote-income :showInvitionCard="true" :prodId="_id" :prodType="ckFrom.circle" @goInvite="inviteFriends"></promote-income>
  </div>
</template>
<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
import { mapMutations, mapState } from 'vuex';
import ComfirmCom from "@/components/templates/common/comfirmCom.vue";
import bottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import NoticeBar from "@/components/templates/common/noticeBar.vue";
import PriceBar from '@/components/templates/common/priceBar.vue';
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import DiscountTip from "@/components/templates/common/discountTip.vue";
import couponListCom from "@/components/templates/couponListCom.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import circleCommonList from "@/components/homePage/circle/circleCommonList.vue";
import PackageIndexCom from "@/components/templates/packageIndexCom.vue";
import circleSupporting from "@/components/homePage/circle/circleSupporting.vue";
import videoPopup from "@/components/templates/common/videoPopup.vue";
import PromoteIncome from '@/components/templates/common/promoteIncome.vue';
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import { goDetails } from "@/utils/goDetails.js";
import spec from "@/components/templates/circle/spec.vue";
const LIMIT = 10;
export default {
  name: 'CircleFeed',
  components: {
    MySmallTabbar,
    loadingStatusTem,
    NoticeBar,
    bottomBuyCom,
    ComfirmCom,
    PriceBar,
    DiscountTip,
    couponListCom,
    videoPopup,
    circleCommonList,
    PackageIndexCom,
    circleSupporting,
    spec,
    PromoteIncome
  },
  data() {
    return {
      cfg: JSON.parse(localStorage.getItem("cfg")),
      theme: localStorage.getItem("colorName") || 'mb5_default',
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isiOS: navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1,
      tabList: [{
        title: "简介",
        index: 1
      }, {
        title: "动态",
        index: 2
      }, {
        title: "主题",
        index: 3
      }],
      feedTop: null,
      showNotice: false, //是否显示公告
      noticeMsg: "", //公告信息内容
      couponList: [],
      showCoupon: false, // 是否显示优惠卷
      couponLoading: false, // 优惠卷加载
      couponIsPage: false,
      typeBar: 1,
      supportingList: [],
      showStudyModal: false,
      showPackageTip: false,
      showSupporting: false,
      ckFrom: global.ckFrom,
      showPassword: false,
      noticeText: '',
      circleThemeList: [], //主题列表
      feedList: [], //动态列表
      progress: 0,
      packageList: [],
      playAduioSrc: "", //音频地址
      qrcodeImg: "",
      currentVideoObj: {},
      dataStatus: 'HAS_MORE_DATA',
      answerList: [],
      isShowSpec: false, //是否显示续费弹框
      renewInfo: {}, //续费信息
      specList: [], //续费规则
      currSpec: null, //当前选择的规格
      showVideo: false,
      // enableQuestion: -1, //是否开启问答
    }
  },
  created() {
    this._id = this.$route.query.id || "";//圈子id
    this._refereeId = this.$route.query.refereeId || localStorage.getItem("refereeId"); //分享推荐人的id
    utilJs.appShare(this);
    this._initData();
    // this._getRenewSetting();
    this.getDetails(1);
    getBindPhoneSetting(global.ckFrom.circle).then(res => {
      this._bindPhoneSetting = res;
    });
    this.getRelateList();
    this.getThemeList();
    this.getFeedsList(0);
    this.getAnswererList();
  },
  computed: {
    ...mapState({
      authFromPageType: state => state.circle.authFromPageType,
      isFromRenew: state => state.circle.isFromRenew
    }),
    canFreeJoin() {
      if (!this.feedTop) return false
      if ((this.feedTop.vipDiscount == 0 && this.vipType == 2) || (this.feedTop.svipDiscount == 0 && this.vipType == 4) || ((this.vipType == 3 || this.vipType >= 5) && this.feedTop.commonProdInfo && this.feedTop.commonProdInfo.agentDiscount == 0)) {
        return true
      }
      return false
    },
    //单卖&&没有权限&&价格大于0&&（加入形式&&不是好友助力）&&（优惠券||vip svip折扣信息||积分抵扣）&&（是否参与营销）
    showDiscount() {
      let showdiscount = Number(this.dynicMinProdPrice) > 0 && !this.feedTop.hasPermission;
      return showdiscount;
    },
    // //动态区间价格最低值
    // dynicMinProdPrice() {
    //   let price = 0;
    //   if (this.feedTop.payType == 2) {
    //     if (this.specList.length) {
    //       //圈子续期
    //       price = this.specList.reduce(function (total, item) {
    //         return Number(item.price) < total ? Number(item.price) : total;
    //       }, Number(this.specList[0].price));
    //     } else {
    //       price = this.feedTop.price;
    //     }
    //   }
    //   return price;
    // },
    // //动态区间价格最高值
    // dynicMaxProdPrice() {
    //   let price = 0;
    //   if (this.feedTop.payType == 2) {
    //     if (this.specList.length) {
    //       //圈子续期
    //       price = this.specList.reduce(function (total, item) {
    //         return Number(item.price) > total ? Number(item.price) : total;
    //       }, Number(this.specList[0].price));
    //     } else {
    //       price = this.feedTop.price;
    //     }
    //   }
    //   return price;
    // }
  },
  mounted() { },
  methods: {
    ...mapMutations({
      updateFromRenew: "circle/updateFromRenew"
    }),
    openSpec() {
      this.$refs.circleSpec.open({
        circleId: this._id,
        coverImg: this.feedTop.avatar
      });
    },
    //初始化数据
    _initData() {
      this._couponPage = 1;
      this._bindPhoneSetting = {};
      this._themePageIndex = 1;
      this._themePage = 1;
      this._isPlayingAudio = false;
      this.isChainProd = false;
    },
    jumpToCircleMaster() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleMaster",
        query: {
          id: this._id
        }
      });
      this.updateFromRenew(0);
    },
    chooseSpec(data) {
      console.log("data", data);
      this.currSpec = data;
      this.dynicMinProdPrice = data.price;
      this.clickBuy();
    },
    // 提交密码
    submitPassword(inputPwd) {
      if (!inputPwd.trim()) {
        this.noticeText = "*密码错误";
        return;
      }
      if (this.isClicking) {
        return;
      }
      this.isClicking = true;
      let sendData = {
        circleId: this._id,
        password: inputPwd
      }
      if (this._refereeId) {
        sendData.refereeId = this._refereeId;
      }
      utilJs.postMethod(`${global.apiurl}circle/passwordJoin`, sendData, res => {
        this.isClicking = false;
        if (res.state == 0) {
          this.noticeText = "*密码错误";
        } else {
          this.showPassword = false;
          this.$showCjToast({
            text: '加入成功',
            type: "success",
          }).then(() => {
            this.getDetails(1);
          })
        }
      }, failRes => {
        this.isClicking = false;
      })
    },
    changePsw() {
      this.noticeText = "";
    },
    // handleClickCircleIndex(item) {
    //   if (!this.isHasPermission()) return;
    //   if (this.isSignOut()) return;
    //   this.$routerGo(this, "push", {
    //     path: "/homePage/circle/circleIndex",
    //     query: {
    //       circleId: this._id,
    //       circleMemberId: item.circleMemberId
    //     }
    //   })
    // },
    getAnswererList() {
      utilJs.getMethod(global.apiurl + `circle/getAnswererList/${this._id}`, res => {
        this.answerList = res;
      })
    },
    // 获取动态列表
    getFeedsList(searchType) {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}circle/getFeedsList/${this._id}?index=1&searchType=${searchType}&selectQuestion=-1page=1&limit=${LIMIT}`, res => {
        let resData = res;
        if (resData && resData.length > 0) {
          for (let i = 0; i < resData.length; i++) {
            resData[i].createdAt = utilJs.changeCommentTime(resData[i].createdAt);
          }
        }
        this.feedList = res.data;
        if (res.total * 1 == this.feedList.length) {
          this.dataStatus = res.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
        }
      }, failRes => {
        this.dataStatus = "DATA_ERROR";
      })
    },
    clickGoLiveDetail(liveId, liveType) {
      let toPath = ''
      if (liveType == 1) {
        toPath = `/homePage/live/livePersonalDetail?liveId=${liveId}`
      } else if (liveType == 2) {
        toPath = `/homePage/live/liveDetail?liveId=${liveId}`;
      } else {
        toPath = `/homePage/privateClass/classDetail?classId=${liveId}`;
      }
      this.$routerGo(this, 'push', {
        path: toPath
      })
    },
    // 获取一级评论
    // getCircleComment() {
    //   if (this.bindPhoneSetting && this.bindPhoneSetting.commentBind) {
    //     if (utilJs.goBindMobile()) return;
    //   }
    //   if (!this.isHasPermission()) return;
    //   if (this.isSignOut()) return;
    // },
    handleClickThemeRoute(item) {
      if (!this.isHasPermission()) return;
      if (this.isSignOut()) return;
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleTheme",
        query: {
          themeId: item.themeId
        }
      })
    },
    // 关闭优惠卷
    closeModal() {
      this.showCoupon = false;
    },
    changeType(type) {
      this.typeBar = type;
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    // 点击播放视频
    clickShowVideo(videoSrc) {
      if (this._isPlayingAudio == true) {
        this.playAudioEnd();
      }
      this.showVideo = true;
      this.currentVideoObj = { videoSrc }
    },
    //监听音频播放结束执行的内容
    playAudioEnd() {
      //播放结束自动播放下一个非自己发的语音并且非已读语音
      this.playAduioSrc = "";
      this.progress = 0;
      document.getElementById("audio").src = this.playAduioSrc;
      this._isPlayingAudio = false;
    },
    // 播放音频
    clickPlayAudio(audioUrl, audioTime) {
      let audio = document.getElementById("audio");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;
      this.progress = 0;
      //返回mp3则用audio播放，否则将使用微信将文件下载然后播放
      if (this.playAduioSrc.includes("http") || !this.playAduioSrc) {
        document.getElementById("audio").src = this.playAduioSrc;
        audio.play();
        audio.removeEventListener("ended", this.playAudioEnd, false);
        audio.addEventListener("ended", this.playAudioEnd, false);
      }
      this._isPlayingAudio = true;
    },
    // 参加免费主题
    joinThemeCircle(item) {
      if (this.isBindPhone(2)) return;
      if (this.isSignOut()) return;
      if (!this.isHasPermission()) return;
      let toPath = `/homePage/circle/circleTheme?themeId=${item.themeId}`;
      this.iosAppRouteChange(toPath);
    },
    // 点击图片放大预览
    clickPreviewImage(imgUrl, itemImgList, imgIndex) {
      if (!imgUrl) {
        return;
      }
      let imgUrlList = [];
      for (let key of itemImgList) {
        if (key) {
          imgUrlList.push(key);
        }
      }
      // this.$previewImg({
      //   activeIndex: imgIndex,
      //   imgList: imgUrlList
      // })
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgUrlList // 需要预览的图片http链接列表
      });
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickEnterPwd() {
      if (this.isBindPhone(2)) return;
      if (this.isSignOut()) return;
      this.noticeText = "";
      this.showPassword = true;
    },
    // 获取主题列表
    getThemeList() {
      if (this.themeDataStatus == 'LOADING') {
        return;
      }
      this.themeDataStatus = 'LOADING';
      // this.moreThemeList = [];
      utilJs.getMethod(`${global.apiurl}circle/getThemeList/${this._id}?index=${this._themePageIndex}&page=${this._themePage}&limit=${LIMIT}`, res => {
        if (this._themePageIndex == 1) {
          this.circleThemeList = res.data;
          this.moreThemeList = res.data.slice(0, 6);
        } else {
          this.circleThemeList = [...this.circleThemeList, ...res.data];
        }
        if (res.total * 1 == this.circleThemeList.length) {
          this.themeDataStatus = res.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.themeDataStatus = 'HAS_MORE_DATA';
          this._themePageIndex += LIMIT;
          this._themePage++;
        }
      }, failRes => {
        this.themeDataStatus = "DATA_ERROR";
      })
    },
    getRelateList() {
      utilJs.getMethod(`${global.apiurl}circle/getRelateList/${this._id}`, res => {
        console.log(res)
        this.supportingList = res;
      })
    },
    handleClickGodetail(item) {
      let prodId = item.prodType == this.ckFrom.course ? item.courseId : item.prodType == this.ckFrom.column ? item.columnId : item.prodType == this.ckFrom.package ? item.cId : item.prodType == this.ckFrom.camp ? item.id : '';
      let type = item.prodType == this.ckFrom.course ? item.courseType : '';
      goDetails(this, item.prodType, prodId, '', type)
    },
    clickShowStudyModal() {
      this.showPackageTip = false;
      if (this.supportingList.length > 1) {
        this.showSupporting = true;
      } else {
        let item = this.supportingList[0];
        this.handleClickGodetail(item)
      }
    },
    handleClickCloseSupport() {
      this.showSupporting = false;
    },
    //免费加入圈子
    joinCircle() {
      if (this.isBindPhone(2)) return;
      if (this.isSignOut()) return;
      let sendData = {};
      if (this._refereeId) {
        sendData.refereeId = this._refereeId;
      }
      utilJs.postMethod(`${global.apiurl}circle/joinCircle/${this._id}`, sendData, res => {
        this.$showCjToast({
          text: '加入成功',
          type: "success",
        }).then(() => {
          this.jumpToCircleMaster();
        })
      }, failRes => { })
    },
    // 购买圈子
    clickBuy() {
      if (this.isBindPhone(1)) return;
      if (this.isSignOut()) return;
      if (!this.currSpec) {
        this.openSpec();
        return;
      }
      let queryT = null;
      queryT = {
        cId: 0,
        extId: this._id,
        ckFrom: global.ckFrom.circle,
        extraId: 0,
        circleSpecDateType: this.currSpec.dateType, //类型
        circleSpecDateVal: this.currSpec.dateVal,
        goodsRoomId: this.$route.query.goodsRoomId
      }
      this.$routerGo(this, "push", {
        path: "/homePage/course/coursePay",
        query: queryT
      });
      this.updateFromRenew(0);
    },
    backPackage() {
      if (this.isBindPhone(2)) return;
      if (this.isSignOut()) return;
      if (this.feedTop.hasBoughtBy) {
        this.joinCircle();
      } else {
        if (this.supportingList.length == 1) {
          this.showPackageTip = true;
        } else if (this.supportingList.length >= 2) {
          this.clickShowStudyModal();
        } else {
          this.$showCjToast({
            text: '加入该圈子需购买相关课程,暂无课程请联系管理员',
            type: "warn",
          })
        }
      }
    },
    isSignOut() {
      // 黑名单
      if (this.feedTop.status == -1) {
        this.$showCjToast({
          text: "暂无此操作权限，请联系圈子管理员~",
          type: "warn",
        });
        return true;
      } else {
        return false;
      }
    },
    getCircleData() {
      if (!this.isHasPermission()) return;
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleData",
        query: {
          circleId: this.feedTop.circleId
        }
      })
    },
    //邀请好友
    inviteFriends: function () {
      if (this._bindPhoneSetting && this._bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let ckFrom = global.ckFrom.circle;
      let extId = this._id;
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: { cId: 0, extId: extId, ckFrom: ckFrom }
      });
    },
    // 获取接口数据
    getDetails(type) {
      utilJs.getMethod(`${global.apiurl}circle/details/${this._id}?type=${type}`, res => {
        if (res.deletedStatus == -1) {
          this.$routerGo(this, "replace", {
            path: "/error/emptyPage",
            query: {
              from: "circle",
              info: '该圈子已被删除,请联系管理员'
            }
          });
          return
        }
        if (res.isShow == -1) {
          this.$routerGo(this, "replace", {
            path: "/error/emptyPage",
            query: {
              from: "circle",
              info: '该圈子已被隐藏,请联系管理员'
            }
          });
          return
        }
        res.status = res.status || 1;
        res.isExit = res.isExit || 1;
        this.setDynicPrice(res.price);
        // 新价格模式圈子详情页除了规格半弹窗其他都不展示积分\会员折扣信息
        res.deductiblePoints = 0;
        res.vipDiscount = 100;
        res.svipDiscount = 100;
        this.feedTop = res;
        // 有权限直接跳转圈子主页
        if (this.isHasPermission(false) && !this.authFromPageType && !this.isFromRenew) {
          this.rediretToMaster();
          return;
        }
        this.noticeMsg = res.notice;
        this.showNotice = res.notice != "" && res.isCloseBannerNotice != 1 && res.hasPermission ? true : false;
        if (this.feedTop.visitorPerm == -1) {
          this.tabList.splice(1, 1);
        }
        if (res.isAutoNotice == 1 && res.isCloseNotice != 1 && res.notice != "" && res.hasPermission) {
          this.showNoticeMessage(res.notice, true);
        }
        if (this.feedTop.hasPermission == false && this.feedTop.status == 1) {
          this.getCouponList();
        }
        if (this.feedTop.role != 0) {
          this.addVisitLog()
        }
        setDocumentTitle(res.name || "圈子名称");
        if (this.feedTop.payType == 4) {
          // 非单卖获取相关联知识套餐
          // this.getBelong(1)
          this.getRelatePackage();
        }
        // if (this.isFromRenew) {
        //   setTimeout(() => {
        //     this.$refs.circleSpec.open({
        //       circleId: this._id,
        //       coverImg: this.feedTop.avatar
        //     });
        //   }, 500)
        // }
        this.wechatShare();
      })
    },
    //
    setDynicPrice(price) {
      let priceArr = price.toString().split("~");
      if (priceArr.length == 1) {
        this.dynicMinProdPrice = this.dynicMaxProdPrice = priceArr[0];
      } else if (priceArr.length > 1) {
        this.dynicMinProdPrice = priceArr[0];
        this.dynicMaxProdPrice = priceArr[1];
      } else {
        this.dynicMinProdPrice = this.dynicMaxProdPrice = price;
      }
    },
    getRelatePackage() {
      // proType = 14 : 圈子关联配套课程传递的参数
      utilJs.getMethod(global.apiurl + "combos/showRel?proId=" + this.id + '&proType=14', (res) => {
        this.packageList = res;
      });
    },
    //跳转圈子主详情页
    rediretToMaster() {
      this.$routerGo(this, "replace", {
        path: "/homePage/circle/circleMaster",
        query: {
          id: this._id
        }
      })
    },
    // 判断是否绑定手机号码 bindType 1: 购买需要绑定 2：进入需要绑定
    isBindPhone(bindType) {
      if ((this._bindPhoneSetting && this._bindPhoneSetting.buyBind && bindType == 1) || (this._bindPhoneSetting && this._bindPhoneSetting.getBind && bindType == 2)) {
        if (utilJs.goBindMobile()) return true;
      } else {
        return false;
      }
    },
    addVisitLog() {
      utilJs.postMethod(global.apiurl + `circle/addVisitLog`, {
        circleId: this._id,
        circleMemberId: this.feedTop.circleMemberId
      }, res => { })
    },
    // 获取可以领取得优惠卷
    getCouponList: function () {
      if (!this.couponLoading) {
        this.couponLoading = true;
        let url = `${global.apiurl}redeemCodes/getCouponsByRedeemType?courseId=${this._id}&redeemType=181&limit=10&page=${this.couponPage}`;
        utilJs.getMethod(url, (res) => {
          this.couponLoading = false;
          this.couponList = res.data ? this.couponList.concat(res.data) : [];
          this.couponPage = res.next_page_url ? (this._couponPage + 1) : this._couponPage;
          this.couponIsPage = res.next_page_url ? true : false;
        },
          failRes => {
            this.couponLoading = false;
          }
        );
      }
    },
    // 判断是否有权限
    isHasPermission(isShowToast = true) {
      // role：1=成员；2=圈主  status：1=正常；-1=拉入黑名单  isExit:1=正常；-1=退出了圈子
      let toastText = '';
      let flag = true;
      if (this.feedTop.hasPermission == false && this.feedTop.status == 1) {
        toastText = "加入圈子可参与互动";
        flag = false;
      } else if (this.feedTop.hasPermission == false && this.feedTop.status == -1) {
        toastText = "暂无此操作权限，请联系圈子管理员~";
        flag = false;
      } else if (this.feedTop.isExit == -1) {
        toastText = "暂无此操作权限，请联系圈子管理员~";
        flag = false;
      }
      if (!flag && isShowToast) {
        this.$showCjToast({
          text: toastText,
          type: "warn",
        });
      }
      return flag;
    },
    handleClickNotice() {
      this.showNoticeMessage(this.noticeMsg, false);
    },
    handleClickCloseNotice() {
      this.showNotice = false;
      this.closeNotice('banner');
    },
    closeNotice(type) {
      utilJs.postMethod(global.apiurl + `circle/closeNotice`, { circleId: this._id, type: type }, res => {
        // this.getDetails(1);
      })
    },
    showNoticeMessage(message, isClose) {
      this.$cjConfirm({
        title: '圈子公告', //
        titleCenter: true, //标题是否居中
        message: message,
        messageCenter: false, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: false, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '', //确认按钮文本
        onConfirm: () => {
          if (isClose) {
            this.closeNotice('layer');
          }
        },
        onCancel() {
        },
      })
    },
    //分享
    wechatShare: function () {
      let title = this.feedTop.shareSetting.shareTitle || this.feedTop.name || window.localStorage.getItem("shareTitle");
      let shareImg = this.feedTop.shareSetting.sharePic || this.feedTop.avatar || window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}&id=${this._id}`;
      let shareDesc = this.feedTop.shareSetting.shareDesc || this.feedTop.intro || '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = this.feedTop.shareSetting.shareTitle || this.feedTop.name || window.localStorage.getItem("shareTitle");
      let shareImg = this.feedTop.shareSetting.sharePic || this.feedTop.avatar || window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}&id=${this._id}`;
      let shareDesc = this.feedTop.shareSetting.shareDesc || this.feedTop.intro || '点击查看详情';
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  }

}
</script>

<style lang="scss" scoped>
/deep/ .dialog-popup {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
/deep/ {
  .item-feed{
    margin: 0;
    padding-left:.6rem;
    padding-right:.6rem;
  }
}
.borderL:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.1rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  background: var(--rgbcolor);
  content: "";
}
.tabhBar {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 1.7rem;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 9;
}

.boxThemeItem {
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}
/deep/ .priceBar .c-ph24 {
  padding: 0;
}
.leader {
  padding: 1rem 0 0;
  .intro {
    padding-top: 2.7rem;
    background: #fafafa;
    border-radius: 0.5rem 2rem 0.5rem 0.5rem;
  }
}
.roles-tag {
  border-radius: 0.15rem;
  font-size: 0.5rem;
  font-weight: 500;
  padding: 0.05rem 0.1rem;
  position: relative;
}
/deep/ {
  .operate-entry {
    display: none;
  }
  .operate-bottombar {
    display: none;
  }

  .theme-attend {
    display: none;
  }
}

.banner {
  width: 100%;
  max-height: 16rem;
  overflow: hidden;
}

/deep/ .mod-discount {
  .borderL {
    font-size: 0.55rem;
    padding-left: 0;
    color: #999999;
    &:before {
      display: none;
    }
  }
}
</style>

